<template>
  <div class="main-content-box">
    <!-- <i class="iconfont">&#xe62f;</i> -->
    <div id="topoDemo"></div>
  </div>
</template>

<script>
import G6 from '@antv/g6'
export default {
  name: 'g6demo3',
  data () {
    return {
      demoData: {
        // isRoot: true,
        id: 'node0',
        label: '集团',
        text: '\ue827',  //对应iconfont.css 里面的content，注意加u
        style: {
          fill: 'red'
        },
        // labelCfg: {
        //   style: {
        //     fill: "blue"
        //   }
        // },
        backgroundConfig: null,// 自定义项，用于判读是否需要圆背景
        size: 66,
        children: [
          {
            id: 'node1',
            label: '光纤',
            text: '\ue719',
            style: {
              fill: 'Coral'
            },
            backgroundConfig: null,
            size: 25,
            children: [
              {
                id: 'node2',
                label: '4号楼',
                text: '\ue60e',
                style: {
                  fill: '#5B8FF9'
                },
                backgroundConfig: null,
                size: 45,
                children: [
                  {
                    id: 'node5',
                    label: '工作站组',
                    text: '\ue68c',
                    style: {
                      fill: '#c6E5F5'
                    },
                    backgroundConfig: null,
                    size: 25
                  }
                ]
              },
              {
                id: 'node3',
                label: '5号楼',
                text: '\ue60e',
                style: {
                  fill: '#5B8FF9'
                },
                backgroundConfig: null,
                size: 45,
                children: [
                  {
                    id: 'node6',
                    label: '工作站组',
                    text: '\ue68c',
                    style: {
                      fill: '#c6E5F5'
                    },
                    backgroundConfig: null,
                    size: 25
                  },
                  {
                    id: 'node17',
                    label: '工作站组',
                    text: '\ue68c',
                    style: {
                      fill: '#c6E5F5'
                    },
                    backgroundConfig: null,
                    size: 25
                  }
                ]
              },
              {
                id: 'node4',
                label: '6号楼',
                text: '\ue60e',
                style: {
                  fill: '#5B8FF9'
                },
                backgroundConfig: null,
                size: 45,
                children: [
                  {
                    id: 'node7',
                    label: '工作站组',
                    text: '\ue68c',
                    style: {
                      fill: '#c6E5F5'
                    },
                    backgroundConfig: null,
                    size: 25
                  }
                ]
              },
            ]
          },
          // {
          //   id: 'node8',
          //   label: '高速带宽',
          //   text: '\ue78a',
          //   style: {
          //     fill: 'white'
          //   },
          //   relation: '云端网络',
          //   backgroundConfig: {
          //     fill: 'Coral',
          //   },
          //   // labelCfg: {
          //   //   style: {
          //   //     fill: 'Coral',
          //   //   },
          //   // },
          //   size: 20,
          //   children: [
          //     {
          //       id: 'node9',
          //       label: '1号楼',
          //       text: '\ue60e',
          //       style: {
          //         fill: '#5B8FF9'
          //       },
          //       backgroundConfig: null,
          //       size: 45,
          //       children: [
          //         {
          //           id: 'node10',
          //           label: '工作站组',
          //           text: '\ue68c',
          //           style: {
          //             fill: '#c6E5F5'
          //           },
          //           backgroundConfig: null,
          //           size: 25
          //         }
          //       ]
          //     }
          //   ]
          // },
          {
            id: 'node9',
            label: '1号楼',
            text: '\ue60e',
            style: {
              fill: '#5B8FF9'
            },
            relation: '云端网络',
            backgroundConfig: null,
            size: 45,
            children: [
              {
                id: 'node10',
                label: '工作站组',
                text: '\ue68c',
                style: {
                  fill: '#c6E5F5'
                },
                backgroundConfig: null,
                size: 25
              }
            ]
          },
          {
            id: 'node11',
            label: '2号楼',
            text: '\ue60e',
            style: {
              fill: '#5B8FF9'
            },
            backgroundConfig: null,
            size: 45,
            relation: '以太网',
            linebackgroundConfig: {
              fill: 'Coral',
            },
            children: [
              {
                id: 'node12',
                label: '工作站组',
                text: '\ue68c',
                style: {
                  fill: '#c6E5F5'
                },
                backgroundConfig: null,
                size: 25
              }
            ]
          },
          {
            id: 'node13',
            label: '3号楼',
            text: '\ue60e',
            style: {
              fill: '#5B8FF9'
            },
            backgroundConfig: null,
            size: 45,
            relation: '以太网',
            linebackgroundConfig: {
              fill: 'cyan',
            },
            children: [
              {
                id: 'node14',
                label: '工作站组',
                text: '\ue68c',
                style: {
                  fill: '#c6E5F5'
                },
                backgroundConfig: null,
                size: 25
              }
            ]
          },
          {
            id: 'node15',
            label: '4号楼',
            text: '\ue60e',
            style: {
              fill: '#5B8FF9'
            },
            backgroundConfig: null,
            size: 45,
            relation: '以太网',
            lineicon: '\ue60e',
            image: '\ue60e',
            linebackgroundConfig: {
              fill: 'Coral',
            },
            linestyle: {
              stroke: 'green'
            },
            children: [
              {
                id: 'node16',
                label: '工作站组',
                text: '\ue68c',
                style: {
                  fill: '#c6E5F5'
                },
                backgroundConfig: null,
                size: 25
              },
              {
                id: 'node18',
                label: '工作站组',
                text: '\ue68c',
                style: {
                  fill: '#c6E5F5'
                },
                backgroundConfig: null,
                size: 25
              }
            ]
          }
        ]
      }
    }
  },
  mounted () {
    this.initGrahp()
  },
  methods: {
    initGrahp () {
      //使用iconfont
      G6.registerNode('iconfont', {
        draw (cfg, group) {
          const { backgroundConfig: backgroundStyle, style, labelCfg: labelStyle } = cfg;

          if (backgroundStyle) {
            group.addShape('circle', {
              attrs: {
                x: 0,
                y: 0,
                r: cfg.size,
                ...backgroundStyle,
              },
              // must be assigned in G6 3.3 and later versions. it can be any value you want
              name: 'circle-shape',
            });
          }

          const keyShape = group.addShape('text', {
            attrs: {
              x: 0,
              y: 0,
              fontFamily: 'iconfont', // 对应css里面的font-family: "iconfont";
              textAlign: 'center',
              textBaseline: 'middle',
              text: cfg.text,
              fontSize: cfg.size,
              ...style,
            },
            // must be assigned in G6 3.3 and later versions. it can be any value you want
            name: 'text-shape1',
          });
          const labelY = backgroundStyle ? cfg.size * 2 : cfg.size;

          group.addShape('text', {
            attrs: {
              x: 0,
              y: labelY,
              textAlign: 'center',
              text: cfg.label,
              ...labelStyle.style,
            },
            // must be assigned in G6 3.3 and later versions. it can be any value you want
            name: 'text-shape1',
          });
          return keyShape;
        },
      });

      /**
       * 边动画 虚线 实现 开始
       */

      // const dashArray = [
      //   [0, 1],
      //   [0, 2],
      //   [1, 2],
      //   [0, 1, 1, 2],
      //   [0, 2, 1, 2],
      //   [1, 2, 1, 2],
      //   [2, 2, 1, 2],
      //   [3, 2, 1, 2],
      //   [4, 2, 1, 2],
      // ];

      // const lineDash = [4, 2, 1, 2];
      // const interval = 9; // lineDash 的和
      // G6.registerEdge(
      //   'line-dash',
      //   {
      //     afterDraw (cfg, group) {
      //       // 获得该边的第一个图形，这里是边的 path
      //       const shape = group.get('children')[0];
      //       // 获得边的 path 的总长度
      //       const length = shape.getTotalLength();
      //       let totalArray = [];
      //       // 计算出整条线的 lineDash
      //       for (var i = 0; i < length; i += interval) {
      //         totalArray = totalArray.concat(lineDash);
      //       }

      //       let index = 0;
      //       // 边 path 图形的动画
      //       shape.animate(
      //         ratio => {
      //           // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。
      //           const cfg = {
      //             lineDash: dashArray[index].concat(totalArray),
      //           };
      //           // 每次移动 1
      //           index = (index + 1) % interval;
      //           // 返回需要修改的参数集，这里只修改了 lineDash
      //           return cfg;
      //         },
      //         {
      //           repeat: true, // 动画重复
      //           duration: 3000,
      //         },
      //       ); // 一次动画的时长为 3000
      //     },
      //   },
      //   'cubic',
      // ); // 该自定义边继承了内置三阶贝塞尔曲线边 cubic


      /**
      * 边动画 虚线 实现 结束
      */

      G6.registerEdge(
        'line-growth',
        {
          draw (cfg, group) {
            // const startPoint = cfg.startPoint;
            // const endPoint = cfg.endPoint;
            const { startPoint: startPoint, endPoint: endPoint, linestyle, linelabelCfg: linelabelStyle, linebackgroundConfig: linebackgroundConfig, } = cfg
            const shape = group.addShape('path', {
              attrs: {
                stroke: linestyle.stroke,
                path: [
                  ['M', startPoint.x, startPoint.y],
                  ['L', endPoint.x / 3 + (2 / 3) * startPoint.x, startPoint.y], // 三分之一处
                  ['L', endPoint.x / 3 + (2 / 3) * startPoint.x, endPoint.y], // 三分之二处
                  ['L', endPoint.x, endPoint.y],
                ],
              },
              // must be assigned in G6 3.3 and later versions. it can be any value you want
              name: 'path-shape',
            });
            return shape;
          },
        },
        {
          afterDraw (cfg, group) {
            const shape = group.get('children')[0];
            const length = shape.getTotalLength();
            debugger
            shape.animate(
              ratio => {
                // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。
                const startLen = ratio * length;
                // 计算线的lineDash
                const cfg = {
                  lineDash: [startLen, length - startLen],
                };
                return cfg;
              },
              {
                repeat: true, // 动画重复
                duration: 2000, // 一次动画的时长为 2000
              },
            );
          },
        },
        'cubic',
      );
      /**
       * 边动画 水流运动  结束
       */

      let COLOR = '#40a9ff'
      //创建G6 图实例
      let width = document.getElementById('topoDemo').scrollWidth * 0.8
      let height = document.getElementById('topoDemo').scrollHeight || 900
      let graph = new G6.TreeGraph({
        container: 'topoDemo',
        width,
        height,
        modes: {
          default: [
            'drag-canvas',
            'drag-node',
            'collapse-expand',
            'zoom-canvas'
            // {
            //   type: 'tooltip',
            //   formatText (model) {
            //     let text = '名称: ' + model.label
            //     return text
            //   },
            //   shouldUpdate: e => {
            //     return true
            //   }
            // }
          ]
        },
        defaultNode: {
          backgroundConfig: {
            backgroundType: 'circle',
            fill: COLOR,
            stroke: 'LightSkyBlue',
          },
          type: 'iconfont',
          size: 12,
          style: {
            fill: 'white',
            //  stroke: '#5B8FF9',
          },
          labelCfg: {
            style: {
              fill: COLOR,
              fontSize: 12,
            },
          },
          linkPoints: {
            top: true,
            bottom: true,
            left: true,
            right: true,
            fill: 'black',
            size: 5,
          },
        },
        defaultEdge: {
          linebackgroundConfig: {
            backgroundType: 'circle',
            fill: COLOR,
          },
          type: 'line-growth',
          linestyle: {
            stroke: 'green'
          },
          linelabelCfg: {
            style: {
              fill: COLOR,
              fontSize: 12,
            },
          },
        },
        layout: {
          type: 'mindmap',
          direction: 'H',
          getHeight: () => {
            return 26
          },
          getWidth: () => {
            return 26
          },
          getVGap: () => {
            return 20
          },
          getHGap: () => {
            return 50
          },
          getSide: d => {
            if (d.id === 'node1') {
              return 'left'
            }
            return 'right'
          }
        }
      })
      /**
       * 此处代码导致无法拖动节点
       */
      // let centerX = 0;
      // graph.node(function (node) {
      //   if (node.id === 'Modeling Methods') {
      //     centerX = node.x;
      //   }

      //   return {
      //     label: node.label,
      //     labelCfg: {
      //       position:
      //         node.children && node.children.length > 0
      //           ? 'left'
      //           : node.x > centerX
      //             ? 'right'
      //             : 'left',
      //       offset: 5,
      //     },
      //   };
      // });
      graph.edge(({ target }) => {
        console.log(target)
        // const fill = target.get('model').backgroundConfig && target.get('model').backgroundConfig.fill;
        const fill = target.get('model').linebackgroundConfig && target.get('model').linebackgroundConfig.fill;
        return {
          type: 'cubic-horizontal',
          color: fill || COLOR,
          label: target.get('model').relation || '',
          // label: target.get('model').relation + target.get('model').lineicon || '',
          labelCfg: {
            style: {
              fill: fill || COLOR,
              fontSize: 12,
            },
          },
        };
      });


      graph.data(this.demoData);
      graph.render();
      graph.fitView();

    }
  }
}
</script>

<style scoped>
</style>